<template>
	<view class="changePhone">
		<view class="maxBox">
			<view class="box scale-1px-bottom">
				<input type="number" v-model.trim="oldPhone" value="" placeholder="请输旧入手机号"/>
			</view>
			<view class="box disFlex scale-1px-bottom">
				<input type="number" value="" v-model.trim="oldCode" maxlength="6" placeholder="请输入短信验证码"/>
				<button :disabled="oldDisabled" @tap="getOldMa">{{oldword}}</button>
			</view>
			<view class="box scale-1px-bottom">
				<input type="number" value="" v-model.trim="newPhone" placeholder="请输入新手机号"/>
			</view>
			<view class="box disFlex scale-1px-bottom">
				<input type="number" value="" v-model.trim="newCode" maxlength="6" placeholder="请输入短信验证码"/>
				<button :disabled="newDisabled" @tap="getNewMa">{{newword}}</button>
			</view>
		</view>
		<button class="submit" @tap="submit">确认</button>
	</view>
</template>

<script>
	import {isPhone,isPwd,isEmail} from '@/api/reg.js'
	export default {
		data() {
			return {
				oldPhone:'',
				isoldPhone:'',
				oldCode:'',
				isoldCode:'',
				newPhone:'',
				newCode:'',
				isnewCode:'',
				oldword:'获取验证码',
				oldDisabled:false,
				newword:'获取验证码',
				newDisabled:false,
				user_id:'',
				token:'',
			}
		},
		onLoad() {
			this.isoldPhone=uni.getStorageSync('userinfo').phone;
			this.user_id=uni.getStorageSync('userinfo').id;
			this.token=uni.getStorageSync('userinfo').token;
		},
		methods: {
			getOldMa () {
				if (this.oldPhone == '') {
					return uni.showToast({
						title:'请输入旧手机号',
						icon:'none'
					})
				}
				 if (this.oldPhone != this.isoldPhone) {
					return uni.showToast({
						title:'请输入正确的旧手机号',
						icon:'none'
					})
				}
				this.getOldCode();
				
			},
			getOldCode () {
				this.oldDisabled = true;
				let data = {
					user_id:this.user_id,
					token:this.token,
					phone:this.oldPhone,
					type:5
				};
				this.http('/api/user/send_code','post',data).then( res => {
					if(res.sta == 200) {
						console.log('旧'+res.data.code)
						this.isoldCode=res.data.code
						uni.showToast({
							title:res.msg,
							icon:'none'
						})
						this.oldtimer();
					}else{
						uni.showToast({
							title:res.mess,
							icon:'none'
						})
						this.oldDisabled = false;
					}
				})
			},
			oldtimer () {
				let s = 60;
				var t = setInterval( () => {
					if (s <= 1) {
						s = 60;
						this.oldDisabled = false;
						this.oldword = "获取验证码";
						clearInterval(t);
					}else {
						s --;
						this.oldword = s+'s后重新获取';
					}
				},1000)
			},
			
			
			
			
			
			
			getNewMa () {
				if (this.newPhone == '') {
					return uni.showToast({
						title:'请输入新手机号',
						icon:'none'
					})
				}
				if (isPhone(this.newPhone) == 'phoneErr') {
					return uni.showToast({
						title:'请输入正确的新手机号',
						icon:'none'
					})
				}
				this.getNewCode();
			},
			getNewCode () {
				this.newDisabled = true;
				let data = {
					user_id:this.user_id,
					token:this.token,
					phone:this.newPhone,
					type:2
				};
				this.http('/api/user/send_code','post',data).then( res => {
					if(res.sta == 200) {
						console.log('新'+res.data.code)
						this.isnewCode=res.data.code
						uni.showToast({
							title:res.msg,
							icon:'none'
						})
						this.newtimer();
					}else{
						uni.showToast({
							title:res.mess,
							icon:'none'
						})
						this.newDisabled = false;
					}
				})
			},
			newtimer () {
				let s = 60;
				var t = setInterval( () => {
					if (s <= 1) {
						s = 60;
						this.newDisabled = false;
						this.newword = "获取验证码";
						clearInterval(t);
					}else {
						s --;
						this.newword = s+'s后重新获取';
					}
				},1000)
			},
			submit () {
				if (this.oldPhone == '') {
					return uni.showToast({
						title:'请输入旧手机号',
						icon:'none'
					})
				}
				if (this.oldPhone != this.isoldPhone) {
					return uni.showToast({
						title:'请输入正确的旧手机号',
						icon:'none'
					})
				}
				if (this.oldCode == '') {
					return uni.showToast({
						title:'请输入旧手机验证码',
						icon:'none'
					})
				}
				if (this.oldCode != this.isoldCode) {
					return uni.showToast({
						title:'旧手机验证码有误',
						icon:'none'
					})
				}
				if (this.newPhone == '') {
					return uni.showToast({
						title:'请输入新手机号',
						icon:'none'
					})
				}
				if (isPhone(this.newPhone) == 'phoneErr') {
					return uni.showToast({
						title:'请输入正确的新手机号',
						icon:'none'
					})
				}
				if (this.newCode == '') {
					return uni.showToast({
						title:'请输入新手机验证码',
						icon:'none'
					})
				};
				if (this.newCode != this.isnewCode) {
					return uni.showToast({
						title:'新手机验证码有误',
						icon:'none'
					})
				};
				let data = {
					user_id:this.user_id,
					token:this.token,
					old_phone:this.oldPhone,
					old_code:this.oldCode,
					phone:this.newPhone,
					code:this.newCode
				}
				this.http('/api/user/change_phone','post',data).then(res => {
					console.log(res)
					if (res.sta == 200) {
						let v=uni.getStorageSync('userinfo');
						v.phone=this.newPhone
						uni.setStorageSync('userinfo', v)
						uni.switchTab({
							url:this.router(`mine`)
						})
						uni.showToast({
							title:'修改成功',
							icon:'none'
						});
					}else{
						uni.showToast({
							title:res.mess,
							icon:'none'
						})
					}
					this.disabledsubmit = false;
					uni.hideLoading();
				})
			}
		}
	}
</script>

<style lang="less">
	.changePhone{
		padding: 0 40rpx;
		.maxBox{
			.box{
				border-radius:5px;
				padding: 40rpx 0;
				input{
					height: 100%;
					width: 100%;
					// padding: 0 28rpx;
					flex: 1;
				}
				button{
					margin: 0 28rpx;
					background:rgba(255,255,255,0.1) !important;
					height: 60rpx;
					line-height: 60rpx;
					border-radius:20px;
					color: #2291FF;
					padding: 0 20rpx;
				}
			}
		}
		.word{
			font-size:30rpx;
			padding-top: 32rpx;
			color:rgba(102,102,102,1);
		}
		.submit{
			height:100rpx;
			width: 100%;
			background:#2291FF !important;
			border-radius:5px;
			color: #fff;
			font-size: 36rpx;
			line-height: 100rpx;
			margin-top: 80rpx;
		}
	}
</style>
